<template>
    <div>
        <el-container>
            <el-header height="80px">
                <el-page-header title="返回" @back="goBack">
                </el-page-header>
                <el-divider></el-divider>
            </el-header>
            <el-container>
                <el-aside width="450px">
                    <el-form ref="specs" label-width="80px" :model="specs">
                        <el-form-item label="名称">
                            <el-input v-model="specs.name" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="specs.description"></el-input>
                        </el-form-item>
                        <el-form-item label="单位" prop="unit">
                            <el-input v-model="specs.unit"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button @click="resetForm('specs')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-aside>
                <el-main>
                    <div>
                        <b>规格值列表</b>&nbsp;
                        <el-button icon="el-icon-plus" type="primary" @click="addSpecValue">添加规格值</el-button>
                    </div>
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="value"
                        label="规格值名称"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="extend"
                        label="扩展">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row.id)" >编辑</el-button>
                            <el-button type="danger" size="small" icon="el-icon-delete" @click="delet(scope.row.id,scope.row.value)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    background
                    @current-change="goto"
                    :page-size="5"
                    layout="prev, pager, next"
                    :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
        <insert-spec-value ref="insertShow" @refresh="goto"></insert-spec-value>
        <edit-spec-value ref="editShow" @refresh="goto"></edit-spec-value>
    </div>
</template>

<script>
import InsertSpecValue from '@/components/SpecEdit/InsertSpecValue.vue';
import EditSpecValue from '@/components/SpecEdit/EditSpecValue.vue';
import http from '@/utils/request';
export default {
    name: 'ThreeIndex',
    components:{
        InsertSpecValue,
        EditSpecValue
    },
    data() {
        return {
            tableData:{},
            specs:{},
            total: '',
            current: ''
        };
    },

    mounted() {
        this.goto()
        const id = this.$route.query.id
        //  console.log(id);
        http.get(`/spec/select/${id}`)
            .then(res =>{
                //console.log(res.data.data);
                this.specs=res.data.data
                //console.log(this.specs);
            })
           
    },

    methods: {
        goBack(){
            this.$router.push({
                path:'/spec/spec-key',
            })
        },
        async onSubmit(){
            //console.log(this.specs);
            try {
                // 提交数据
                const r = await http.put('/spec/update',this.specs)
                if(r.data.code > 0) {
                    // 给用户一个提示的消息
                    this.$message({
                        message: '数据修改成功',
                        type: 'success'
                    })
                    // 关闭模态框
                    //this.dialogTableVisible = false
                    // 数据重新加载
                    //this.$emit('refresh')
                }
            }catch(err) {
                console.log(err)
            }
        },
        resetForm(formName){
            //console.log(formName);
            this.$refs[formName].resetFields();
        },
        goto(pageNum=1){
            const id = this.$route.query.id
            //console.log(id);
            //console.log(pageNum);
            http.get(`/specValue/${id}?pageNum=${pageNum}`)
            .then(res =>{
                //console.log(res.data.data);
                this.tableData=res.data.data.data
                this.total=res.data.data.total
                this.current=res.data.data.current
                //console.log(this.tableData);
                //console.log(res.data.data.total);
            }) 
        },
        //添加
        addSpecValue(){
            this.$refs.insertShow.$data.dialogTableVisible=true
            this.$refs.insertShow.$data.current=this.current
            const id = this.$route.query.id
            this.$refs.insertShow.$data.specValue.specId=id
            
        },
        edit(id){
            http.get(`/specValue/select/${id}`)
            .then(res => {
                //console.log(res.data.data);
                this.$refs.editShow.$data.specValue=res.data.data
            })
            this.$refs.editShow.$data.dialogTableVisible=true
            this.$refs.editShow.$data.current=this.current
            //console.log(this.$refs.editShow.$data.specValue);
        },
        async delet(id,name){
            //console.log(id);
            //console.log(name);
            try {
                await this.$confirm(`你确定要删除 ${name} 吗?`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                // 代码能下来，表示用户点击了确认按钮
                const s = await http.delete(`/specValue/${id}`)
                // 给用户一个提示的消息
                this.$message({
                    message: '数据删除成功',
                    type: 'success'
                })
                //刷新再查询
                this.goto(this.current)
                }catch(err) {
                console.log(err)
                }
        }
    },
};
</script>

<style lang="scss" scoped>

</style>